<style lang="less" scoped>
.hire-item {
    background: linear-gradient( 180deg, #E3FFFC 0%, #FFFFFF 40%);
    border-radius: 20rpx;
    position: relative;
    color: #333;
    font-size: 24rpx;
    line-height: 24rpx;

    &.mb {
        margin-bottom: 30rpx;
    }

    .item-label-count-down {
      position: absolute;
      top: -12rpx;
      left: -6rpx;
      z-index: 99;
      width: 190rpx;
      height: 54rpx;
      line-height: 54rpx;
      text-align: center;
      color: #4e260a;
      font-weight: 500;
      &::before {
        content: "";
        display: inline-block;
        position: absolute;
        background-image: url(https://pic.bangbangtongcheng.com/static/MyPublic/countdown.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        top: 0;
        left: -10rpx;
        width: 100%;
        height: 100%;
      }
      .text {
        position: absolute;
        z-index: 2;
        left: 20rpx;
      }
    }
    .item-box {
        display: flex;
        padding: 30rpx 20rpx;

        .item-info {
            width: 100%;

            .item-title {
                font-size: 32rpx;
                line-height: 40rpx;
                font-weight: 600;
                width: 100%;
                color: #000;
                .ellipsis {
                    width: 100%;
                    display: inline-block;
                }                
            }
            .subclass-box {
                margin-top: 16rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-flow: row wrap;

                .subclass-item {
                    display: flex;
                    align-items: center;
                
                    // &.left {
                    //     flex-flow: row wrap;
                    // }

                    .card-icon {
                        width: 24rpx;
                        height: 24rpx;
                        margin-right: 6rpx;
                        vertical-align: text-top;
                    }
                    .region {
                        margin-right: 30rpx;
                    }
                }
                .price {
                    color: #E00201;
                    font-size: 32rpx;
                    line-height: 32rpx;
                    font-weight: 600;
                    display: flex;
                    flex: 1;
                    justify-content: flex-end;
                    padding-left: 10px;
                    white-space: nowrap;
                }
                .item-labels {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    height: 48rpx;
                    overflow: hidden;
                    white-space: nowrap;
                    position: relative;
                    .shadow {
                        background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
                        position: absolute;
                        right: 0;
                        top: 0;
                        width: 100rpx;
                        height: 48rpx;
                    }
                    
                    .label {
                        display: inline-block;
                        padding: 8rpx 15rpx;
                        background: #f5f7f9;
                        margin-right: 10rpx;
                        color: #666666;
                        border-radius: 4rpx;
                    }
                }
                .more {
                    width: 48rpx;
                    height: 48rpx;
                }
            }
        }
    }
    .item-line {
        height: 2rpx;
        background: #ebebed;
        margin: 0 20rpx;
        
    }
    .item-user {
        padding: 14rpx 20rpx 30rpx;
        display: flex;
        align-items: center;
        // border-top: 2rpx solid rgb(235, 235, 237);
        .left-images {
            display: flex;
            align-items: center;
            .user-head {
                width: 42rpx;
                height: 42rpx;
                border-radius: 42rpx;
            }
            .user-label {
                margin-left: 10rpx;
                width: 74rpx;
                height: 30rpx;
                background: url(https://pic.bangbangtongcheng.com/static/bbcz/index-label-geren.png) no-repeat;
                background-size: cover;
                &.ent {
                    background-image: url(https://pic.bangbangtongcheng.com/static/bbcz/index-label-qiye.png);
                }
            }

        }
        .right-name {
            width: calc(100% - 126rpx);
            padding-left: 10rpx;
            display: flex;
            .name {
                flex: 1;
            }
            .distance {
                background: url(https://pic.bangbangtongcheng.com/static/bbcz/index-target.png) no-repeat;
                background-size: contain;
                padding-left: 30rpx;
            }
        }
    }
    .ellipsis {
		/*强制文本在一行内显示*/
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.title-tag {
    min-width: 70rpx;
    height: 40rpx;
    background: #e7f5f4;
    border-radius: 4rpx;
    box-sizing: border-box;
    vertical-align: middle;
    color: #0fa291;
    font-size: 24rpx;
    line-height: 24rpx;
    margin-right: 10rpx;
    padding: 8rpx 11rpx;
    display: inline-block;
}
</style>

<template>
    <view class="hire-item" :class="{mb: itemMB}" @click="details">
        <view v-if="data.upStatus == 1 && data.examineStatus == 2" class="item-label-count-down">
            <view class="text">
                有效期{{ 30 - data.daysSinceCreateDate }}天
            </view>
        </view>
        <view class="item-box">
            <view class="item-info">
                <view class="item-title">
                    <text class="ellipsis">
                        <text class="title-tag">
                            {{ data.recruitmentType == 1 ? '全职' : '兼职' }}
                        </text>
                        {{ data.title }}
                    </text>
                </view>
                <view class="subclass-box">
                    <view class="subclass-item left">
                        <view class="subclass region">
                            <image v-if="data.region" class="card-icon"
                                src="https://pic.bangbangtongcheng.com/static/bbcz/index-location.png" />
                            {{ data.region }}
                        </view>
                        <view class="subclass">
                            <image v-if="data.positionCategory" class="card-icon"
                                src="https://pic.bangbangtongcheng.com/static/bbcz/index-job.png" />
                            {{ data.positionCategory || '' }}
                        </view>
                    </view>
                    <view class="price subclass">
                        {{ setPrice }}
                    </view>
                </view>
                <view class="subclass-box">
                    <view class="item-labels">
                        <view class="shadow" />
                        <view class="label" v-for="(item, i) in setBenefit" :key="i">
                            {{ item }}
                        </view>
                    </view>
                    <image v-if="setBenefit.length >= 5" class="more" src="https://pic.bangbangtongcheng.com/static/index-gradient-right-%20arrow.png" />
                </view>
            </view>
        </view>
        <view class="item-line" />
        <view class="item-user">
            <view class="left-images">
                <image class="user-head" :src="data.userImage || user.image || 'https://pic.bangbangtongcheng.com/static/my/header.png'" />
                <view class="user-label" :class="{ent: data.enterpriseName}" />
            </view>
            <view class="right-name">
                <view class="ellipsis text name">
                    {{ data.enterpriseName ? data.enterpriseName : data.nikeName ? data.nikeName : '未命名用户' }}
                </view>
                <view v-if="data.distance" class="distance">
                    {{ data.distance }}km
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: () => ({})
        },
        itemMB: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            
        };
    },
    // watch: {
    //     data: {
    //         handler(val){
    //             console.log(val);
    //         },
    //         deep: !0
    //     }
    // },
    computed: {
        setPrice(){
            let str;
            const data = this.data;
            if (data.recruitmentType == 1) {
                str = data.salaryRange == '面议' ? '面议' : `${data.salaryRange}元`;
            } else if (data.salaryRange){
                // str = `${data.salaryRange.split(',').join('')}&emsp;${data.settlementMethod}`
                str = `${data.salaryRange.split(',').join('')} ${data.settlementMethod}`
            }
            return str || '';
        },
        setBenefit(){
            const arr = this.data.fringeBenefits && this.data.fringeBenefits.split(',');
            return arr || [];
        },
        user(){
            return this.data.userInformation || {};
        },
    },
    methods: {
        details() {
            this.$emit('item-click',this.data);
        }
    }
}
</script>